<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div class="header">
        <div class="mi-logo">
            <img src="images/mi-logo.png" alt="">
        </div>
        <div class="title">
            <h1>小米商城</h1>
            <p>让每个人都能享受科技的乐趣</p>
        </div>
    </div>
    <div class="banner">
        <div class="content">
                <p class="login">
                    <span class="account-register">账号登录</span>
                    <span class="account-register-two">扫码登录</span>
                </p>
                <div class="register-one"> 
                    <form>
                        <p class="account">
                            <input type="text" placeholder="邮箱/手机号/小米账号"/>
                        </p>
                        <p class="password">
                            <input type="password" placeholder="密码"/>
                        </p>
                        <p class="submit">
                            <input type="submit" value="登录"/>
                        </p>
                    </form>
                    <p class="register">
                        <span>注册小米账号</span>
                        <span>|</span>
                        <span>忘记密码?</span>
                    </p>
                    <div class="btn">
                        <p class="others">
                            <span class="left"></span>
                            其他方式登录
                            <span class="right"></span>
                        </p>
                        <div class="icon">
                            <a href="#"><span class="QQ"></span></a>
                            <a href="#"><span class="Sina"></span></a>
                            <a href="#"><span class="Alipay"></span></a>
                            <a href="#"><span class="WeChat"></span></a>
                        </div>
                    </div>
                </div>
                <div class="register-two">
                    <img src="images/ma.png" class="erwei">
                    <p>使用<span class="orange">小米商城app</span>扫一扫</p>
                    <p>小米手机可打开「设置」>「小米帐号」扫码登录</p> 
                </div> 
            </div>
        </div>       
    </div>
    <script>
        $(".account-register").click(function () {
            $(".register-one").show();
            $(".register-two").hide();
        })
        $(".account-register-two").click(function () {
            $(".register-two").show();
            $(".register-one").hide();
        })
    </script>
    <div class="footer">
        <ul>
            <span>简体</span>
            <span>|</span>
            <span>繁体</span>
            <span>|</span>
            <span>English</span>
            <span>|</span>
            <span>常见问题</span>
        </ul>
        <p>小米公司版权所有-京ICP备10046444-
           <img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png" alt="">
           京公网安备11010802020123-京ICP证110507号
        </p>
    </div>
</body>
</html>